<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="~{common/header :: commonHead}"></head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight"
     th:with="page=${pageObj.page},size=${pageObj.pageSize},total=${pageObj.total},totalPage=${pageObj.totalPage},keyword=${pageObj.keyword},fromDate=${pageObj.fromDate},toDate=${pageObj.toDate},storeName=${pageObj.storeName}">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>会员积分记录</h5>
                    <div class="ibox-tools">
                        <shiro:hasPermission name="edit_integral_record">
                            <a href="#" data-toggle="modal" data-target="#myModal" title="积分编辑"><i
                                    class="glyphicon glyphicon-pencil"></i></a>
                        </shiro:hasPermission>
                        <shiro:hasPermission name="export_integral_record">
                            <a th:href="${'/integral/export?page='+page+'&pageSize='+size+'&keyword='+(keyword==null?'':keyword)+'&fromDate='+(fromDate==null?'':fromDate)+'&toDate='+(toDate==null?'':toDate)+'&total=' + (total==null?'':total) + '&storeName=' + (storeName==null?'':storeName)+ '&consumeType=' + (consumeType==null?'':consumeType)}"
                               title="导出数据"><i class="glyphicon glyphicon-export"></i></a>
                        </shiro:hasPermission>
                            <a href="javascript: window.location.href='/integral/list';" title="刷新"><i
                                class="glyphicon glyphicon-repeat"></i></a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="">
                    </div>
                    <div id="editable_wrapper" class="dataTables_wrapper form-inline" role="grid">
                        <div class="row">
                            <div class="col-sm-2">
                                <div class="dataTables_length" id="editable_length"><label>每页
                                    <select name="editable_length" aria-controls="editable"
                                            class="form-control input-sm" id="page_size_selector">
                                        <option th:selected="${size eq 5}" value="5">5</option>
                                        <option th:selected="${size eq 10}" value="10">10</option>
                                        <option th:selected="${size eq 25}" value="25">25</option>
                                        <option th:selected="${size eq 50}" value="50">50</option>
                                        <option th:selected="${size eq 100}" value="100">100</option>
                                    </select> 条记录</label>
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <select id="consumeType" class="form-control input-sm" style="font-size: 12px">
                                    <option th:selected="${consumeType eq ''}" value="">请选择积分明细渠道</option>
                                    <option th:selected="${consumeType eq 'parking'}" value="parking">停车券兑换</option>
                                    <option th:selected="${consumeType eq 'admin'}" value="admin">管理员</option>
                                    <option th:selected="${consumeType eq 'user'}" value="user">签到</option>
                                    <option th:selected="${consumeType eq 'store'}" value="store">优惠券兑换</option>
                                    <option th:selected="${consumeType eq 'selfHelp'}" value="selfHelp">自助积分</option>
                                </select>
                            </div>
                            <div class="col-sm-3">
                                <div class="input-daterange input-group" id="datepicker">
                                    <input type="text" class="input-sm form-control" name="start" id="start_date"
                                           placeholder="开始时间" autocomplete="off" th:value="${pageObj.fromDate} ">
                                    <span class="input-group-addon">到</span>
                                    <input type="text" class="input-sm form-control" name="end" id="end_date"
                                           placeholder="结束时间" autocomplete="off" th:value="${pageObj.toDate}">
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <div class="input-group">
                                    <input th:value="${pageObj.storeName}" type="text" placeholder="请输入商户名称"
                                           class="input-sm form-control" id="storeName">
                                </div>
                            </div>
                            <div class="col-sm-3" style="float: right">
                                <div class="input-group" style="width: 100%">
                                    <input th:value="${keyword}" type="text" placeholder="请输入卡号/订单号/手机号/用户名"
                                           class="input-sm form-control" id="search_bar">
                                    <span class="input-group-btn">
                                        <button type="button" class="btn btn-sm btn-primary"
                                                id="search-btn"> 搜索</button>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <table class="table table-striped table-bordered table-hover  dataTable" id="editable"
                               aria-describedby="editable_info">
                            <thead>
                            <tr role="row">
                                <th aria-label="卡号" style="width: 8%;">卡号</th>
                                <th aria-label="手机号" style="width: 8%;">手机号</th>
                                <th aria-label="用户名" style="width: 7%;">用户名</th>
                                <th aria-label="渠道" style="width: 5%;">渠道</th>
                                <th aria-label="积分" style="width: 5%;">积分</th>
                                <th aria-label="交易说明" style="width: 20%;">交易说明</th>
                                <th aria-label="生成时间" style="width: 14%;">生成时间</th>
                                <th aria-label="商户名称" style="width: 10%;">商户名称</th>
                                <th aria-label="商户业态" style="width: 8%;">商户业态</th>
                                <th aria-label="订单号" style="width: 15%;">订单号</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr th:if="${#lists.isEmpty(pageObj.list)}">
                                <td colspan="10" style="text-align: center">
                                    没有数据o&gt;^&lt;o
                                </td>
                            </tr>
                            <tr th:each="item : ${pageObj.list}">
                                <td th:with="cardNum=${item.memberCardNum}"
                                    th:utext="${null == keyword ? cardNum : #strings.replace(cardNum,keyword,'<span style= &quot;color: red;font-weight:bold&quot;>'+ keyword +'</span>')}"></td>
                                <td th:with="phone=${item.phone}"
                                    th:utext="${null == keyword ? phone : #strings.replace(phone,keyword,'<span style= &quot;color: red;font-weight:bold&quot;>'+ keyword +'</span>')}"></td>
                                <td th:with="nickName=${item.memberName}"
                                    th:utext="${null == keyword ? nickName : #strings.replace(nickName,keyword,'<span style= &quot;color: red;font-weight:bold&quot;>'+ keyword +'</span>')}"></td>
                                <td th:text="${item.consumeType == 'parking'?'停车券兑换':(item.consumeType == 'admin'? '管理员':(item.consumeType == 'user'? '签到':(item.consumeType == 'store'? '优惠券兑换':'自助积分')))}"></td>
                                <td th:text="${(item.tradeAction== 0 ? '+' : '-') + item.integralPoint}"></td>
                                <td th:with="tradingContent=${item.tradingContent}"
                                    th:utext="${null == keyword ? tradingContent : #strings.replace(tradingContent,keyword,'<span style= &quot;color: red;font-weight:bold&quot;>'+ keyword +'</span>')}"></td>
                                <td th:text="${item.createTime}"></td>
                                <td th:with="store_name=${item.storeName}"
                                    th:utext="${null == storeName ? store_name : #strings.replace(store_name,storeName,'<span style= &quot;color: red;font-weight:bold&quot;>'+ storeName +'</span>')}"></td>
                                <td th:text="${item.storeCommercial == null ? '-' : item.storeCommercial}"></td>
                                <td th:with="orderNum=${item.orderNum}"
                                    th:utext="${null == keyword ? orderNum : #strings.replace(orderNum,keyword,'<span style= &quot;color: red;font-weight:bold&quot;>'+ keyword +'</span>')}"></td>
                            </tr>
                            </tbody>
                        </table>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="dataTables_info" role="alert" aria-live="polite" aria-relevant="all"
                                     th:text="${'显示 '
                                      + (page * size + 1)
                                      + ' 到 '
                                      + ((page+1) lt totalPage ? (size + page * size) : (total % size == 0 ? total : (total % size + size * page)))
                                      + ' 项，共 '
                                      + total + ' 项 ' + totalPage + ' 页'}">
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="dataTables_paginate paging_simple_numbers">
                                    <ul class="pagination" th:if="${totalPage>1}">
                                        <li th:class="${page==0}?'paginate_button previous disabled':'paginate_button previous'">
                                            <a th:href="${(page==0)?'#':'/integral/list?page='+page
                                             +'&pageSize='+size
                                             +'&keyword='+(null==keyword?'':keyword)
                                             +'&fromDate='+(null==fromDate?'':fromDate)
                                             +'&storeName='+(null==storeName?'':storeName)
                                             +'&consumeType='+(null==consumeType?'':consumeType)
                                             +'&toDate='+(null==toDate?'':toDate)}">上一页</a>
                                        </li>
                                        <li th:if="${totalPage<10}" th:each="i:${#numbers.sequence(1,totalPage)}"
                                            th:class="${i==page+1?'active':''}">
                                            <a th:href="${'/integral/list?page='+i
                                            +'&pageSize='+size
                                            +'&keyword='+ (null==keyword?'':keyword)
                                            +'&fromDate='+(null==fromDate?'':fromDate)
                                            +'&storeName='+(null==storeName?'':storeName)
                                             +'&consumeType='+(null==consumeType?'':consumeType)

                                            +'&toDate='+(null==toDate?'':toDate)}"
                                               th:text="${i}"></a>
                                        </li>
                                        <li th:if="${page<4&&totalPage>=9}" th:each="i:${#numbers.sequence(1,9)}"
                                            th:class="${i==page+1?'active':''}">
                                            <a th:href="${'/integral/list?page='+i
                                            +'&pageSize='+size
                                            +'&keyword='+ (null==keyword?'':keyword)
                                            +'&fromDate='+(null==fromDate?'':fromDate)
                                            +'&storeName='+(null==storeName?'':storeName)
                                            +'&consumeType='+(null==consumeType?'':consumeType)
                                            +'&toDate='+(null==toDate?'':toDate)}"
                                               th:text="${i}"></a>
                                        </li>
                                        <li th:if="${page>=4&&totalPage>=9&&page+5<totalPage}"
                                            th:each="i:${#numbers.sequence(page - 3,page + 5)}"
                                            th:class="${i==page+1?'active':''}">
                                            <a th:href="${'/integral/list?page='+i
                                            +'&pageSize='+size
                                            +'&keyword='+ (null==keyword?'':keyword)
                                            +'&fromDate='+(null==fromDate?'':fromDate)
                                            +'&storeName='+(null==storeName?'':storeName)
                                            +'&consumeType='+(null==consumeType?'':consumeType)
                                            +'&toDate='+(null==toDate?'':toDate)}"
                                               th:text="${i}"></a>
                                        </li>
                                        <li th:if="${page>=4&&totalPage>=9&&page+5>=totalPage}"
                                            th:each="i:${#numbers.sequence(totalPage - 8,totalPage)}"
                                            th:class="${i==page+1?'active':''}">
                                            <a th:href="${'/integral/list?page='+i
                                            +'&pageSize='+size
                                            +'&keyword='+ (null==keyword?'':keyword)
                                            +'&fromDate='+(null==fromDate?'':fromDate)
                                            +'&storeName='+(null==storeName?'':storeName)
                                            +'&consumeType='+(null==consumeType?'':consumeType)
                                            +'&toDate='+(null==toDate?'':toDate)}"
                                               th:text="${i}"></a>
                                        </li>
                                        <li th:class="${page+1==totalPage||totalPage<1}?'paginate_button next disabled':'paginate_button next'">
                                            <a th:href="${(page+1==totalPage||totalPage<1) ? '#' : '/integral/list?page='+(page+2)
                                             +'&pageSize='+size
                                             +'&keyword='+(null==keyword?'':keyword)
                                             +'&fromDate='+(null==fromDate?'':fromDate)
                                             +'&storeName='+(null==storeName?'':storeName)
                                             +'&consumeType='+(null==consumeType?'':consumeType)
                                             +'&toDate='+(null==toDate?'':toDate)}">下一页</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width: 900px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">用户积分操作</h4>
            </div>
            <div class="modal-body" style="height: 300px">
                <div class="input-group">
                    <input type="text" placeholder="请输入手机号" class="input-sm form-control" id="search-user"><i
                        class="glyphicon glyphicon-pencil" style="margin-left: -15%"></i>
                </div>
                <table class="table table-hover">
                    <thead style="display:table;width:100%;table-layout:fixed;">
                    <tr>
                        <th style="width: 20%;">用户名</th>
                        <th style="width: 15%;">手机号</th>
                        <th style="width: 15%;">卡号</th>
                        <th style="width: 15%;">积分</th>
                        <th style="width: 17%;">操作</th>
                        <th style="width: 18%;">说明</th>
                    </tr>
                    </thead>
                    <tbody style="display:block;height:200px;overflow-y:scroll;width: 100%;" id="inner">

                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="submit-table">提交</button>
            </div>
        </div>
    </div>
</div>
</body>
<script th:inline="javascript">
    $("#page_size_selector").change(function () {
        let fromDate = $("#start_date").val();
        let toDate = $("#end_date").val();
        let selected = $(this).val();
        window.location.href = initUrl(0, selected, '', fromDate, toDate, '','');
    })
    $("#search_bar").keydown(function (e) {
        let fromDate = $("#start_date").val();
        let toDate = $("#end_date").val();
        let storeName = $("#storeName").val();
        let size = $("#page_size_selector").val();
        let consumeType = $("#consumeType").val();
        let keyword = $(this).val();
        if (e.keyCode == 13) {
            window.location.href = initUrl(0, size, keyword, fromDate, toDate, storeName, consumeType);
        }
    })
    $("#search-btn").click(function () {
        let fromDate = $("#start_date").val();
        let toDate = $("#end_date").val();
        let size = $("#page_size_selector").val();
        let keyword = $("#search_bar").val();
        let storeName = $("#storeName").val();
        let consumeType = $("#consumeType").val();

        window.location.href = initUrl(0, size, keyword, fromDate, toDate, storeName, consumeType);
    })

    function initUrl(page, size, key, fromDate, toDate, storeName, consumeType) {
        if (null == page) {
            page = 0;
        }
        return "/integral/list?page=" + page + "&pageSize=" + size + "&keyword=" + key + "&fromDate=" + fromDate + "&toDate=" + toDate + "&storeName=" + storeName + "&consumeType=" + consumeType
    }

    $("#search-user").on("keyup", function () {
        $("#inner").html('');
        let _this = $(this);
        let keyword = _this.val();
        if (keyword.length < 5) {
            return;
        }
        layer.load(1);
        setTimeout(function () {
            $.ajax({
                url: "/user/search?page=&pageSize=999&keyword=" + keyword,
                type: "get",
                success: function (res) {
                    let list = res.list;
                    layer.closeAll('loading');
                    let str = ''
                    list.forEach(obj => {
                        str += "<tr style='display:table;width:100%;table-layout:fixed;'>" +
                            "<td style='display:none;'>" + obj.id + "</td>" +
                            "<td style='width: 20%'>" + (null == obj.memberName ? '(未命名)' : obj.memberName) + "</td>" +
                            "<td style='width: 15%'>" + obj.phone + "</td>" +
                            "<td style='width: 15%'>" + obj.memberCardNum + "</td>" +
                            "<td style='width: 15%;overflow: hidden'>" + obj.integral + "</td>" +
                            "<td style='width: 17%'><button style='width: 23.6px' onclick='changeOption(this," + obj.integral + ")'>+</button><input style='width: 60px'></td>" +
                            "<td style='width: 211px'><select style='height:24px;width: 95px;'><option value='注册送积分'>注册送积分</option><option value='雨伞租借'>雨伞租借</option><option value='婴儿车租借'>婴儿车租借</option><option value='积分兑换积分调整'>积分兑换积分调整</option><option value='消费积分调整'>消费积分调整</option><option value='小票补录积分调整'>小票补录积分调整</option><option value='签到积分调整'>签到积分调整</option><option value='H5玩游戏赢积分'>H5玩游戏赢积分</option><option value='看房送积分'>看房送积分</option><option value='锦鲤宝宝投票活动'>锦鲤宝宝投票活动</option></select><input style='height:26px;width: 100px;' placeholder='输入说明'></td>" +
                            "</tr>"
                    });
                    $("#inner").html(str);
                },
            });
        }, 500);
    });

    function changeOption(e, i) {
        let option = $(e).html();
        if (i == '0') {
            return;
        }
        if (option === '+') {
            $(e).html('-')
        } else {
            $(e).html("+")
        }
    }

    $("#submit-table").click(() => {
        var items = new Array();
        $("#inner tr").each((i, el) => {
            let id = $(el).children('td').eq(0).html();
            let originNum = $(el).children('td').eq(4).html();
            let valueInt = $(el).find('input').eq(0).val();
            let reason = $(el).find('input').eq(1).val();
            let option = $(el).find('button').html();
            if (option == '-') {
                if (originNum - valueInt < 0) {
                    layer.alert('扣除积分不能大于初始积分')
                    $(this).removeEventListener('click', false)
                }
            }
            if ('' != valueInt && null != valueInt) {
                let integral = option + $(el).find('input').eq(0).val();
                let tradingContent = $(el).find('select').val();
                if (null != reason && '' != reason) {
                    tradingContent = reason;
                }
                let item = {userId: id, integral: integral, tradingContent: tradingContent}
                items.push(item);
            }
        });
        $.ajax({
            url: "/user/integral",
            data: {data: JSON.stringify(items)},
            type: "post",
            dataType: "json",
            async: false,
            success: function (data) {
                if (data.resCode === 0) {
                    layer.alert('积分修改成功');
                    $('#myModal').modal('hide');
                    $(".modal-backdrop").remove();
                    $("body").removeClass('modal-open');
                    $("#inner").html('')
                    window.location.href = "/integral/list"
                } else {
                    layer.alert('修改失败')
                }
            }
        });
    });
</script>

</html>